<template>
  <div class="myInfo">
    <!-- 使用 -->
    <nav-bar title="我的资料" path="/home/my"></nav-bar>
    <div class="content">
      <div class="top">
        <my-cell
          class="mycell"
          title="头像"
          type="img"
          :right="userInfo.avatar"
        ></my-cell>
      </div>
      <div class="middle">
        <my-cell title="昵称" :right="userInfo.nickname"></my-cell>
        <my-cell title="性别" right="男"></my-cell>
        <my-cell title="地区" right="北京"></my-cell>
        <my-cell title="个人简介" :right="userInfo.intro"></my-cell>
      </div>
      <van-button
        type="primary"
        block
        class="btn"
        @click="exit"
        color="#fff"
        round
      >
        <template #default>
          <div class="txt">
            退出登入
          </div>
        </template>
      </van-button>
    </div>
  </div>
</template>
<script>
// 导入
// 这个navBar很多地方用到因此全局注册
// import navBar from '@/components/nav-bar.vue'
import myCell from '@/views/home/my/mycell.vue'
import { mapState } from 'vuex'
import { removeLocal } from '@/utils/local.js'
export default {
  // 注册
  components: {
    // navBar,
    myCell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    exit () {
      // alert('你被点击啦')
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '你确认退出吗?'
        })
        .then(() => {
          // on confirm
          this.$store.commit('setLoginState', false)
          removeLocal('token')
          this.$router.push('/login')
        })
        .catch(() => {
          // 取消不退出不处理
          // on cancel
        })
    }
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  height: 100%;
  background-color: #f7f4f5;
  .content {
    padding: 0 15px;
    .top {
      margin-top: 20px;
      margin-bottom: 10px;
      .mycell {
        border-radius: 8px;
        overflow: hidden;
      }
    }
    .btn {
      margin-top: 15px;
      border-radius: 8px;
      .txt {
        color: red;
      }
    }
    .middle {
      border-radius: 8px;
      overflow: hidden;
    }
  }
}
</style>
